package components

import "net/http"

templ Button(classes string, hxUrl string, hxTarget string, hxSwap string,method string,label string) {
	<button
 		class="btn { classes }"
 		type="submit"
 		hx-target={ hxTarget }
 		hx-trigger="click"
 		hx-swap="outerhtml transition:false"
 		if method == "get" {
			hx-get={ hxUrl }
		}
 		if method == "post" {
			hx-post={ hxUrl }
		}
	>{ label }</button>
}

templ TextInput(name string, placeholder string, method string,endpoint string,hxTrigger string) {
	<input
 		type="text"
 		name={ name }
 		placeholder={ placeholder }
 		hx-target="#result"
 		if method == "get" {
			hx-get={ endpoint }
		}
 		if method == "post" {
			hx-post={ endpoint }
		}
 		hx-trigger={ hxTrigger }
 		class={ "input join-item input-bordered input-primary w-full max-w-xs px-4 py-3 my-8" }
	/>
}

templ VersionComponent(Version string, UpdateText string) {
	<div class="stats shadow mt-auto">
		<div class="stat">
			<div class="stat-title">Current App Version</div>
			<div class="stat-value">{ Version }</div>
			<div class="stat-desc">{ UpdateText }</div>
		</div>
	</div>
}

templ GreetForm(endpoint string) {
	<div class="result" id="result">Please enter your name below 👇</div>
	@TextInput("name","Enter Name","post",endpoint,"keyup changed delay:100ms")
}

func Greet(w http.ResponseWriter, r *http.Request) {
	if r.FormValue("name") != "" {
		w.Write([]byte("Hello " + r.FormValue("name") + ", It's show time!"))
		return
	}
	w.Write([]byte("Please enter your name below 👇"))
}

templ Pages(Pages []struct{Path string;Label string}, appVersion struct{Version string;Text string}) {
	for _, i := range Pages {
		<li hx-boost hx-get={ i.Path } hx-target="#target-form" hx-swap="innerHTML transition:true">
			<a
 				class="font-medium text-2xl"
			>{ i.Label }</a>
		</li>
	}
	@VersionComponent(appVersion.Version,appVersion.Text)
}

templ TestPage(target string, hxswap string) {
	<h1>Test page for components</h1>
	@Button("","/modal",target,hxswap,"post","Preview Modal")
}

templ ModalPreview(title string, data string ) {
	<dialog id="modal" class="modal modal-bottom" open>
		<div class="modal-box">
			<h3 class="font-bold text-lg">{ title }</h3>
			<p class="py-4">{ data }</p>
		</div>
		<form method="dialog" class="modal-backdrop">
			<button>close</button>
		</form>
	</dialog>
}
